<template>
	<view class="blank" v-show="bindshow" :style="skin">
		<view class="blank_div" @click="close"></view>
		<view class="uni-block-form">
			<text class="title">请先绑定手机</text>
			<!-- #ifndef MP-WEIXIN -->
			<u-form :model="form" ref="uForm" :border-bottom="false">
				<u-form-item :border-bottom="false"><u-input :clearable="false" :custom-style="input_style" placeholder="输入手机号" v-model="form.mobile" /></u-form-item>
				<u-form-item label-width="160rpx" :border-bottom="false">
					<u-input :clearable="false" :custom-style="input_style" placeholder="输入验证码" v-model="form.mycode" />
					<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
					<u-button type="primary" :disabled="!hasmobile" :custom-style="code_Style" size="mini" @click.stop="getcode">{{ tips }}</u-button>
				</u-form-item>

				<u-button type="primary" :disabled="!hascode" :custom-style="customStyle" @click.stop="verificationmobile">确认</u-button>
			</u-form>
			<!-- #endif -->

			<!-- #ifdef MP-WEIXIN -->
			<u-button type="primary" :custom-style="customStyle1" open-type="getPhoneNumber" @getphonenumber="getphone">立即绑定</u-button>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
export default {
	data() {
		return {
			form: {
				mobile: '',
				mycode: ''
			},
			code: '',
			tips: '获取验证码',
			id: '',
			issend: false,
			seconds: 60,
			time: 0,
			minute: 0,
			reset: 0,
			hascode: false,
			hasmobile: false,
			code_Style: {
				width: '146rpx',
				height: '35px',			
				'border-radius': '10rpx',
				color: '#fff',
				'margin-left': '10rpx'
			},
			customStyle: {
				color: '#fff',
				height: '67rpx'
			},
			customStyle1: {
				color: '#fff',
				height: '67rpx'
			},
			input_style: {
				background: '#F5F5F5',
				'border-radius': '10rpx',
				color: '#A9A9A9',
				'text-indent': '20rpx'
			}
		};
	},

	props: {
		bindshow: {
			type: Boolean,
			default: false
		}
	},
	onLoad(e) {
		this.id = e.id;
	},
	computed: {
		...mapState({
			UserInfo: state => state.userInfo,
			skin: state => state.skin
		})
	},
	watch: {
		'form.mobile': {
			handler(newvalue, oldvalue) {
				const _this = this;
				if (this.$u.test.mobile(newvalue)) {
					// _this.code_Style.background = '#4A73FF';

					_this.hasmobile = true;
				} else {
					// _this.code_Style.background = '#C7D4FF';

					_this.hasmobile = false;
				}
			},
			deep: true,
			immediate: true
		},
		'form.mycode': {
			handler(newvalue, oldvalue) {
				const _this = this;
				if (this.$u.test.code(newvalue, 6) && _this.hasmobile) {
					// _this.customStyle.background = '#4A73FF';
					_this.hascode = true;
				} else {
					// _this.customStyle.background = '#C7D4FF';
					_this.hascode = false;
				}
			},
			deep: true,
			immediate: true
		}
	},
	methods: {
		close() {
			this.$emit('hide');
		},
		getphone(e) {
			let data = {
				code: e.detail.code,
				iv: e.detail.iv,
				user_id: this.UserInfo.id
			};
			this.$http('/login/getPhone', data, 'POST').then(res => {
				this.gettokenToUserInfo();
			});
		},
		timeUp() {
			this.issend = false;
		},

		end() {
			// this.$u.toast('倒计时结束');
		},
		start() {
			// this.$u.toast('倒计时开始');
		},
		codeChange(text) {
			this.tips = text;
		},
		verificationmobile() {
			if (this.$u.test.code(this.form.mycode, 6)) {
				this.$http('/login/verification/' + this.form.mobile + '/' + this.form.mycode, {}, 'GET').then(res => {
					if (res.statusCode == 200) {
						this.bindphone();
					}
				});
			} else {
				uni.showToast({
					title: '请输入正确的验证码',
					icon: 'none'
				});
			}
		},

		bindphone() {
			let params = {
				uid: this.id,
				mobile: this.form.mobile,
				code: this.form.mycode
			};
			this.$http('/user/register', params, 'POST').then(res => {
				if (res.statusCode == 200) {
					this.gettokenToUserInfo();
				}
			});
		},
		getcode() {
			if (!this.$u.test.mobile(this.form.mobile)) {
				uni.showToast({
					title: '请填写正确的号码',
					icon: 'none'
				});
				return false;
			}
			// this.reset++;
			// this.time = 59;
			// this.issend = true;
			if (this.$refs.uCode.canGetCode) {
				this.$http('/login/code/' + this.form.mobile, {}, 'GET').then(res => {
					if (res.statusCode == 200) {
						this.code = res.data.msg;
						this.$refs.uCode.start();
					}
				});
			}
		},
		gettokenToUserInfo() {
			let params = {};
			this.$http('/user/tokenToUserInfo', params, 'GET').then(res => {
				if (res.statusCode == 200) {
					let UserInfo = res.data.msg;
					this.$store.commit('setUserInfo', UserInfo);
					this.$emit('hide');
					// uni.navigateBack();
				} else {
					this.$store.commit('setUserInfo', {});
					this.$store.commit('settoken', null);
				}
			});
		}
	}
};
</script>

<style lang="scss">
.blank {
	// background: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100vh;
	left: 0;
	top: 0;
	position: fixed;
	z-index: 10003;
	display: flex;
	align-items: center;
	justify-content: center;
}
.blank_div {
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100vh;
	left: 0;
	top: 0;
	position: absolute;
	z-index: 10003;
}
.uni-block-form {
	width: 686rpx;
	border-radius: 12rpx;
	// margin-left: 32rpx;
	padding: 30rpx 60rpx;
	background: #ffffff;
	position: relative;
	z-index: 10004;
	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		// border-bottom: 1rpx solid #f5f5f5;
		padding: 20rpx 0;
		text-align: center;
		width: 100%;
		display: inline-block;
	}
	.item {
		height: 100rpx;
		.label {
			width: 140rpx;
		}
		.code_btns {
			width: 160rpx;
			font-size: 12rpx;
			border: 1rpx solid #ff3c29;
			color: #ff3c29;
			border-radius: 20rpx;
			text-align: center;
			padding: 5rpx 0;
		}
		.timeout {
			color: #999;
			width: 180rpx;
			border: 1rpx solid #999;
		}
	}
}
</style>
